<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="./js/vue.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div class="app">
        <h1>前后端交互</h1>
        <button @click="handleClick">获取数据</button>
        <hr>
        用户名：{{name}}
        <hr>
        年龄：{{age}}

    </div> 

</body>
<script>
var vm = new Vue({
    el:".app",
    data:{
        name:'',
        age:''
    },
    methods: {
        handleClick(){
            // $.ajax({
            //     url:'http://localhost:8000/user/',
            //     type:'get',
            //     success:data=>{
            //         this.name=data.name,
            //         this.age=data.age 
            //         console.log(data.name)
            //         console.log(data.age)
            //     }
            // })
            // 方式二
            // fetach('http://localhost:8000/user/').then(res=>res.json()).then(res=>{console.log(res)})
            //方式三
            axios.get('http://localhost:8000/user/').then(res=>{
                console.log(res.data)
            })
        }
    }
})
</script>

</html>